<!-- 2：实现课堂上购物车的功能，可以删除商品。
数量变化的自动计算每个的价钱合计和总计。 -->
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>操作当当购物车页面</title>
		<link type="text/css" rel="stylesheet" href="cartStyle.css" />
		<script>
			function a1() {
				if (window.confirm("真的要关闭？"))
					window.close();
				else {
					alert("您放弃了关闭");
				}
			}


			function ab() {
				var a = document.getElementsByName('price');
				var b = document.getElementsByName('amount');
				var c = 0
				for (let i = 0; i < a.length; i++) {
					c += parseFloat(a[i].value) * parseInt(b[i].value);
				}
				document.getElementById('b1').innerHTML = '¥' + c.toFixed(2) + '元';
			}


			function jian(g) {
				var a = g.nextElementSibling.value
				if (a < 1) {
					alert("数量不能小于0");
				} else {
					var a = g.nextElementSibling.value--;
					a--;
					var b = g.parentNode.previousElementSibling.lastElementChild.value;
					var c = a * b;
					g.parentNode.nextElementSibling.innerHTML = '¥' + c.toFixed(2) + '元';
				}
			}


			function jia(t) {
				var a = t.previousElementSibling.value++;
				a++;
				var b = t.parentNode.previousElementSibling.lastElementChild.value;
				var c = a * b;
				t.parentNode.nextElementSibling.innerHTML = '¥' + c.toFixed(2) + '元';
			}


			function a3(str) {
				if (window.confirm("真的要删除？")) {
					var a = str.parentNode.parentNode;
					a.parentNode.removeChild(a);
				} else {
					alert("您放弃了删除");
				}
			}


			function collection() {
				alert("收藏成功");
			}
		</script>
	</head>
	<body>

		<div class="content">
			<div class="logo">
				<img src="../day7/images/dd_logo.jpg"><span onclick="a1()">关 闭</span>
			</div>
			<div class="cartList" id="cartList">
				<ul>
					<li>商品图片</li>
					<li>商品信息</li>
					<li>单价</li>
					<li>数量</li>
					<li>总价</li>
					<li>操作</li>
				</ul>
				<ul>
					<li><img src="../day7/images/dog.jpg"></li>
					<li>我和狗狗活下来了</li>
					<li>¥<input type="text" name="price" value="21.90" id="dog"></li>
					<li><input type="button" name="minus" value="-" onclick="jian(this)" id="jiana"><input type="text"
							name="amount" value="1"><input type="button" name="plus" value="+" onclick="jia(this)"
							id="jia"></li>
					<li id="price0">¥21.90</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="a3(this)">删除</p>
					</li>
				</ul>
				<ul>
					<li><img src="../day7/images/mai.jpg"></li>
					<li>灰霾来了怎么办</li>
					<li>¥<input type="text" name="price" value="24.00" id="huimai"></li>
					<li><input type="button" name="minus" value="-" onclick="jian(this)" id="jiana1"><input type="text"
							name="amount" value="1"><input type="button" name="plus" value="+" onclick="jia(this)"
							id="jia1"></li>
					<li id="price1">¥24.00</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="a3(this)">删除</p>
					</li>
				</ul>
				<ol>
					<li id="totalPrice">商品总计：<span id="b1"></span></li>
					<li><span onclick="ab()">结 算</span></li>
				</ol>
			</div>
		</div>
	</body>
</html>
